<template>
  <div id="nav-col">
      <section id="col-left" class="col-left-nano">
          <div id="col-left-inner" class="col-left-nano-content">
              <div id="user-left-box" class="clearfix hidden-sm hidden-xs">
                  <img alt="" src="../images/samples/scarlet-159.png">                
                  <div class="user-box">
                      <span class="name">
                          欢迎
                          <br>陈小亮</span>
                      <span class="status"> <i class="fa fa-circle"></i>
                          在线
                      </span>
                  </div>
              </div>
              <div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
                  <ul class="nav nav-pills nav-stacked">
                      
                      <li v-for="menu in menus.menus">
                        <template v-if="!menu.submenus">
                          <a v-link="{path: menu.url}">
                            <i class="fa {{menu.icon}}"></i>
                            <span>{{menu.title}}</span>
                            <span v-if="menu.count" class="label label-info label-circle pull-right">{{menu.count}}</span>
                          </a>
                        </template>
                        <template v-else>
                          <a href="#" class="dropdown-toggle">
                              <i class="fa {{menu.icon}}"></i>
                              <span>{{menu.title}}</span>
                              <i class="fa fa-chevron-circle-right drop-icon"></i>
                          </a>
                          <ul class="submenu">
                            <li v-for="submenu in menu.submenus">
                              <a v-link="{path: submenu.url}">{{submenu.title}}</a>
                            </li>
                          </ul>
                        </template>
                      </li>

                      <!-- <li>
                          <a href="index.html"> <i class="fa fa-dashboard"></i>
                              <span>Dashboard</span>
                              <span class="label label-info label-circle pull-right">28</span>
                          </a>
                      </li>
                      <li class="open active">
                          <a href="#" class="dropdown-toggle">
                              <i class="fa fa-table"></i>
                              <span>Tables</span>
                              <i class="fa fa-chevron-circle-right drop-icon"></i>
                          </a>
                          <ul class="submenu">
                              <li>
                                  <a href="tables.html" class="active">Simple</a>
                              </li>
                              <li>
                                  <a href="tables-advanced.html">Advanced</a>
                              </li>
                              <li>
                                  <a href="users.html">Users</a>
                              </li>
                          </ul>
                      </li> -->
              </div>
          </div>
      </section>
  </div>
</template>

<script>
  
  export default {

    name: 'vita-side-bar',

    props: ['menus'],

  }

</script>